// http://localhost:8088/webpack-dev-server
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function (env, argv) {
    env = env || {}
    let config;
    if (env.production) {
        console.log("生产模式注入中...")
        config = require('./config/webpack.production.js')
    } else {
        console.log("开发模式注入中...")
        config = require('./config/webpack.development.js')

    }
    return {
        ...config,
        entry: {
            index: './src/js/index.js',
            page: './src/js/page1.js'
        },
        context: path.resolve(__dirname),
        module: {
            noParse: /jquery/, //优化：不去检测jquery中是否还有依赖（因jquery就是单独的模块）
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    include: path.resolve('src'),
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                // 设置运行浏览器环境
                                presets: [
                                    [
                                        // 指定环境插件
                                        "@babel/preset-env",
                                        {
                                            // 要兼容的浏览器
                                            targets: {
                                                "chrome": "88",
                                                "ie": "10"
                                            },
                                            // 指定版本
                                            "corejs": "3",
                                            // 使用corejs方式 ，按需加载
                                            "useBuiltIns": "usage"
                                        }
                                    ]
                                ]
                            }
                        },
                        // "ts-loader"

                    ]
                },

                {
                    test: /\.(jpg|gif|png)$/i,
                    exclude: /node_modules/,
                    include: path.resolve('src'),
                    type: 'asset',
                    generator: {        //生成路径和文件名
                        filename: 'images/[hash][ext]'
                    },
                    parser: {
                        dataUrlCondition: {     //大于才生成文件，小于用base64 ，不用于图片
                            maxSize: 8 * 1024 //  //只要有就用
                        }
                    }
                },
                {
                    test: /\.s[ac]ss$/i,
                    // exclude: /node_modules/,
                    // include: path.resolve('src'),
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: './../',//生成images/，自动会加
                            },
                        },

                        // 将 CSS 转化成 CommonJS 模块
                        "css-loader",
                        // 将 Sass 编译成 CSS ,依赖node-sass
                        "sass-loader",
                    ],
                },
                {
                    test: /\.css$/i,
                    // exclude: /node_modules/,
                    // include: path.resolve('src'),
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: './../',//生成images/，自动会加
                            },
                        },
                        // 将 CSS 转化成 CommonJS 模块
                        "css-loader",
                    ],
                },

                { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },

                {
                    test: /\.html$/i,
                    use: 'html-withimg-loader'
                }

            ]
        },
        resolve: {
            //凡是下面结尾的都可以作为模块使用
            extensions: [".ts", ".tsx", ".js"],
        },
    }

};
